<template>
  <div class="app-container">
    <xr-header
      placeholder="请输入产品名称"
      show-search
      label="产品库存"
      icon-class="wk wk-contacts"
      icon-color="#19B5F6"
      @search="handleSearch">
      <template slot="ft">
        <el-button
          v-if="canSave"
          type="primary"
          class="xr-btn--primary"
          @click="showCreate = !showCreate">
          库存盘点
        </el-button>

        <el-dropdown
          v-if="moreTypes && moreTypes.length > 0"
          trigger="click"
          @command="handleCommand">
          <el-button icon="el-icon-more"/>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item, index) in moreTypes"
              :key="index"
              :icon="item.icon | wkIconPre"
              :command="item.type">{{ item.name }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </xr-header>

    <div class="container">
      <flexbox
        align="center"
        justify="flex-start"
        class="filter-box">
        <el-select
          v-model="warehouseId"
          placeholder="请选择仓库"
          clearable
          @change="handleFilter">
          <el-option
            v-for="item in warehouseList"
            :key="item.warehouseId"
            :label="item.warehouseName"
            :value="item.warehouseId" />
        </el-select>
        <wk-product-category
          v-model="productType"
          clearable
          placeholder="请选择产品类型"
          type="jxc"
          class="filter-item"
          style="width: 192px"
          @change="handleFilter" />
      </flexbox>

      <el-table
        v-loading="loading"
        :data="dataList"
        :height="tableHeight"
        :cell-class-name="cellClassName"
        stripe
        border
        highlight-current-row
        style="width: 100%;"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
        @sort-change="handleSort">
        <el-table-column
          v-for="(item, index) in fieldList"
          :key="index"
          :fixed="item.fixed"
          :prop="item.prop"
          :label="item.label"
          :width="item.width || ''"
          :min-width="100"
          :sortable="item.sortable || false"
          :formatter="valueFormatter"
          :class-name="item.canVisit ? 'can-visit--underline' : ''"
          show-overflow-tooltip />
      </el-table>

      <div class="p-contianer">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size.sync="pageSize"
          :total="total"
          :pager-count="5"
          class="p-bar"
          background
          layout="prev, pager, next, sizes, total, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </div>

    <create-com
      v-if="showCreate"
      type="jxc_inventory"
      @update="handleRefresh"
      @close="showCreate = false" />

    <j-x-c-all-detail
      v-if="showDetail && clickedRow"
      :id="clickedRow.productId"
      type="jxc_product"
      @update="handleRefresh"
      @close="showDetail = false" />
  </div>
</template>

<script>
import { jxcWarehouseProductQueryPageListAPI, jxcWarehouseProductAllExportExcelAPI } from '@/api/jxc/storage'
import { jxcWarehouseQueryListAPI } from '@/api/jxc/warehouse'

import WkProductCategory from '@/components/NewCom/WkProductCategory'
import CreateCom from '../../components/Create/CreateCom'
import JXCAllDetail from '../../components/JXCAllDetail'

import TableMixin from '../../mixins/Table'
import { isEmpty } from '@/utils/types'

export default {
  name: 'SaleOrderIndex',
  components: {
    WkProductCategory,
    CreateCom,
    JXCAllDetail
  },
  mixins: [TableMixin],
  data() {
    return {
      fieldList: [
        { prop: 'productName', label: '产品名称', fixed: 'left', canVisit: true },
        { prop: 'spDataValue', label: '规格' },
        { prop: 'productCompany', label: '单位' },
        { prop: 'productType', label: '产品类型' },
        { prop: 'remainingQuantity', label: '库存量' },
        { prop: 'warehouseName', label: '所属仓库' }
      ],
      dataList: [],
      type: '',

      productType: '',
      warehouseId: '',
      warehouseList: []
    }
  },
  computed: {
    moreTypes() {
      const temps = []
      // { type: 'enter', name: '导入', icon: 'import' },
      if (this.canExport) {
        temps.push({ type: 'out', name: '导出', icon: 'export' })
      }
      return temps
    },

    canExport() {
      return Boolean(this.jxc && this.jxc.inventory && this.jxc.inventory.excelexport)
    },

    canSave() {
      return Boolean(this.jxc && this.jxc.inventory && this.jxc.inventory.save)
    }
  },
  created() {
    this.getWarehouseList()
  },
  methods: {
    getWarehouseList() {
      jxcWarehouseQueryListAPI({
        pageType: 0
      }).then(res => {
        // console.log('warehouse list', res.data)
        this.warehouseList = res.data.list
      }).catch(() => {})
    },

    getDataList(params = {}, refresh = false) {
      this.loading = true
      if (refresh) {
        this.currentPage = 1
      }
      this.otherParams = params
      jxcWarehouseProductQueryPageListAPI({
        page: this.currentPage,
        limit: this.pageSize,
        ...params
      }).then(res => {
        this.loading = false
        this.dataList = res.data.list
        this.total = res.data.totalRow
      }).catch(() => {
        this.loading = false
      })
    },

    valueFormatter(row, column, cellValue, index) {
      return isEmpty(cellValue) ? '--' : cellValue
    },

    /**
     * 搜索
     * @param keyword
     */
    handleSearch(keyword) {
      this.otherParams.productName = keyword
      this.currentPage = 1
      this.getDataList(this.otherParams, true)
    },

    handleFilter() {
      this.getDataList({
        productType: this.productType,
        warehouseId: this.warehouseId
      }, true)
    },

    handleCommand(command) {
      switch (command) {
        case 'out':
          this.allExportExcel(jxcWarehouseProductAllExportExcelAPI)
          break
      }
    },

    /**
     * 表格点击事件
     * @param row 被点击的行数据
     * @param field 被点击的字段
     */
    handleTableClick(row, field) {
      if (field === 'productName') {
        this.showDetail = true
      }
    }
  }
}
</script>

<style scoped lang="scss">
  @import "../../styles/index";

  .filter-box {
    width: 100%;
    height: 50px;
    padding: 0 20px;

    .filter-item {
      width: 192px;
      margin-left: 15px;
    }
  }
</style>
